<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            /* vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。 */
             vertical-align: middle;
            /*vertical-align: text-bottom;
            vertical-align: text-top; */
            width: 500px;
            height: 280px;
            overflow: hidden;
        }
        .container{
            /* word-wrap: break-word; */
            word-break: break-all;
            margin: 50px auto;
            border: 1px dashed #777777;
            width: 1200px;
            /* word-break: keep-all; 感觉和默认的布局一样 */
            /* word-break: keep-all; */
        }
        .img:hover{
            transition: all 0.7s;
            transform: scale(1.2);
        }
        .imgs{
            width: 300px;
            height: 250px;
            margin: 50px auto;
            overflow: hidden;
        }
        .imgPic{
            width: 100%;
            height: 100%;
        }
        .imgPic:hover{
            transition: all 0.7s;
            transform: scale(1.4);
        }
    </style>
</head>
<body>
    <div class="container">
        aaa<img  src="img1.jpg" class="img" alt="">bbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfgbbbbbbbbbbsdfdsfsdgfasdgdsgfdasfg
    </div>
    <div class="imgs">
        <img  src="img1.jpg" class="imgPic" alt="">
    </div>
</body>
</html>